console.log("OK");
$('.imgBox>li').click(function () {
  //修改图片的展示列表
  //1:获取点击的span的次序
  var $index = $(this).index();
  //2:获取展示的图片的列表
  var $showList = $('.imageList>img');
  //3:遍历每一个img元素，修改src属性
  for (var i = 1; i <= $showList.length; i++) {
    $showList.eq(i - 1).attr('src', 'images/show/' + $index + '/' + i + '.jpg');
  }

  $('.showImage').fadeIn('slow');
});

$(".panel-heading").click(function (e) {
  /*切换折叠指示图标*/
  $(this).find("span").toggleClass("glyphicon-chevron-down");
  $(this).find("span").toggleClass("glyphicon-chevron-up");
});

$('.showImage').click(function () {
  $(this).fadeOut('slow');
});
//前一个处理
$('.prev').click(function (e) {
  //阻止冒泡
  e.stopPropagation();
  //处理快速点击的bug
  if (!$('.imageList').is(":animated")) {
    $('.imageList img:first').animate({
      "left": "-100%"
    }, 1000, function () {
      //把当前的元素追加到
      $('.imageList').append($(this));
      $(this).animate({
        'left': "0px"
      }, 1000);
    });

    $('.imageList').animate({
      "left": "60%"
    }, 1000);
    $('.imageList').animate({
      'left': "50%"
    }, 1000);
  }
});
$('.next').click(function (e) {
  //阻止冒泡
  e.stopPropagation();
  if (!$('.imageList').is(":animated")) {
    $('.imageList img:last').animate({
      "left": "100%"
    }, 1000, function () {
      //把当前的元素放到最底部，插在最前面
      $('.imageList').prepend($(this));
      $(this).animate({
        'left': '0px'
      }, 1000);
    });
    //整体面板左移
    $('.imageList')
      .animate({
        'left': "40%"
      }, 1000)
      .animate({
        "left": '50%'
      }, 1000);
  }
});
